<template>
	<view>
		<cu-custom style="height: 0px;" class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{entity.model.WorkFlowName}}</block>
		</cu-custom>
		<!-- <unifab @dragClick="createSceneByScan" creatTop="70" creatLeft="85" image="../../static/saoma.png" imageWidth="60upx">
		</unifab> -->
		<view class="contentBox">
			<view class="contentHeader">
				<view class="headerLogo">
					<image :src="src" mode=""></image>
				</view>
				
				<view class="contentTitle">
					<view>工作开始时间: {{startShowTime}}</view>
					<view>工作结束时间: {{endShowTime}}</view>
				</view>
			</view>

            <view class="contentHead">
                <view class="baseTitle">基础信息</view>
				<view class="baseCard">
					<view class="flex-between">
                        <view class="left-title">当前人员</view>
                        <view class="right-title">{{entity.model.NewUserNames}}</view>
                    </view>
					<view class="flex-between">
                        <view class="left-title">任务描述</view>
                        <view class="right-title">{{entity.model.Remarks}}</view>
                    </view>
                    <view class="flex-between">
                        <view class="left-title">当前步骤</view>
                        <view class="right-title">{{entity.model.NewTaskNames}}</view>
                    </view>
                    <view class="flex-between">
                        <view class="left-title">任务状态</view>
                        <view class="right-title">{{entity.model.StatusName}}</view>
                    </view>
				</view>
			</view>
			
			<view class="filesBox">
				<view class="titleLine">
					<view class="consultFiles">
						参考文档
					</view>
					<view class="lookMore" @click="lookAllFiles()">
						查看所有文档
					</view>
				</view>
				<view class="flies" v-for="(jtem, j) in showPdfList" :key="j">
					<view class="detailFile">
						<img :src="fileSrc" alt="" />
						<view class="fileName">{{jtem.FileName}}</view>
						<view class="seeBtn" @click="lookJtem(jtem.FilePath)">查看</view>
					</view>
				</view>
			</view>
			
			<view class="flowInfo">
				<h4 class="bodyTitle">流程信息</h4>
				<!-- 新-修改 -->
				<view style="margin-top: 20rpx;margin-bottom: 30rpx;">
					<view v-for="(item, index) in entity.list" :key="index" class="eachBox">
						<!-- 一级标题 -->

                        <view class="oneTitleBox">
                            <view class="newdotting" :class="[item.SortStatus == 0 ? 'redBgc' : item.SortStatus == 1 ? 'blueBgc' : 'greenBgc']"></view>
                            <view class="xinxiContent">
                                <view class="topTitle">
									<view class="topContent">
										{{item.WorkFlowName}}
									</view>
                                </view>
                                
								<view class="usersContain">
									<view v-for="jItem in item.users" :key="jItem.importUnitId" class="usersBox">
										<u-avatar size="mini" :src="headimage"></u-avatar>
										<view class="usersName">
											{{jItem.importUnitName}}
										</view>
									</view>
								</view>
								<view class="btnContain">
								    <!-- <view class="btn btn1"></view> -->
									<view class="btn btn2" v-if="item.IsUpdate&&item.IsAdd" @click="goEdit(item.Id,item.NewStepId,item.IsShare,item.JoinID,item.IsSpare,item.WorkFlowName,item.IsFile)">去填写</view>
									<view class="btn btn3" v-if="item.IsUpdate&&item.IsSave" @click="goEdit(item.Id,item.NewStepId,item.IsShare,item.JoinID,item.IsSpare,item.WorkFlowName,item.IsFile)">继续填写</view>
									<view class="btn btn4" v-if="item.IsView" @click="lookFor(item.Id)">查看</view>
								</view>
							
                            </view>

                        </view>

					</view>
				</view>
				<!-- 新-修改结束 -->
			</view>
		</view>
		<!-- 加入按钮 -->
		<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;height: 200rpx;">
		</view>
		<view v-if="isChoose" class="publish-goods-wrap">
			<!-- <view  @click="choose" class="publish-goods-btn-left"> 选择 </view> -->
			<view @click="chooseSave"  class="publish-goods-btn" >选择且保存 </view>
		</view>
		
		<!-- 查看弹窗 -->
		
		<view v-if='lookForView' class="lookForBox" @click="close()">
			<view class="lookInfoBox">
				<view class="top">
					<view class="title">
						选择查看计划
					</view>
					<view class="close" @click="close()">
						+
					</view>
				</view>
				<view class="lookInfoBody">
					<view v-for="(item,index) in lookForList" :key="index" @click="lookDetail(item.Id)" class="eachLookInfo">
						<view class="lookForInfo">
							{{item.UserName}} -- {{item.AddTime}}
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import unifab from "@/components/beyondGod-drag/beyoundGod-drag.vue";
	//import fileSign from '@/static/filesSign.png'
	export default {
		components:{
			unifab
		},
		data() {
			return {
				isChoose:false,
				headimage:this.$request22.baseUrl1+'/Resource/sg/avatar/commonAvatar.png',
				src:this.$request22.baseUrl1+"/Resource/sg/flow/flowdetail2.png",
				entity:{},
				list:[],
				lookForList:[],
				lookForView: false,
				startShowTime: '',
				endShowTime:'',
				fileSrc: request.baseUrl1+'/Resource/Sg/filesSign.png',
				optionWorkId: '',
				showPdfList: []
			}
		},
		onShow() {
			let that=this
			uni.$on('returnData',function(data){
				let choosedPersonList=data.data
				let flowId=data.flowId
				console.log(flowId)
				console.log(choosedPersonList)
				if(flowId!=null&&choosedPersonList!=null&&choosedPersonList.length>0){
					let chooseListEntity=that.list.find(i => i.Id === flowId)
					if(chooseListEntity!=null){
						let newChooseUser=[]
						for(let i=0;i<choosedPersonList.length;i++){
							let choosedPersonListEntity=choosedPersonList[i]
							let newUser={}
							newUser.DH=''
							newUser.Name=choosedPersonListEntity.RealName
							newUser.UserId=choosedPersonListEntity.Id
							newChooseUser.push(newUser)
						}
						chooseListEntity.users=newChooseUser
						
						for(let i=0;i<that.list.length;i++){
							if(that.list[i].Id===flowId){
								that.list[i].users=newChooseUser
							}
						}
					}
				}
			})
		},
		onLoad(option) {
			let that=this
			that.optionWorkId = option.WorkId
			that.getDetail(option.WorkId)
			// that.isChoose=option.isChoose==1?true:false
		},
		methods: {

            goEdit(id,NewStepId,IsShare,JoinID,IsSpare,WorkFlowName,IsFile){
                uni.navigateTo({
                    url: '/pages-workflow/flowTopic?Id='+id+'&NewStepId='+NewStepId+'&IsShare'+IsShare+'&JoinID'+JoinID+'&IsSpare='+IsSpare+'&WorkFlowName='+WorkFlowName+'&IsFile='+IsFile
                })
            },
			lookFor(id){
				let that = this
				let opts = {
					url: 'WorkflowApi/GetViewListBylogId',
					method: 'get'
				}
				let data = {
					logId: id
				}
				request.httpTokenRequest(opts, data).then(res => {
					if (res.data.code == 1) {
						let lookForList = res.data.data.Data
						if(lookForList&&lookForList.length == 1) {
							that.lookForDetail(lookForList[0].Id,lookForList[0].logId)
						} else if(lookForList&&lookForList.length > 1){
							that.lookForList = lookForList
							that.lookForView = true
						}
					}
				})
			},
			lookForDetail(lookForListID, id){
				uni.navigateTo({
				    url: '/pages-workflow/flowTopic?Id='+lookForListID+'&isView='+true+'&getFileId='+ id
				})
			},
			lookDetail(id){
				uni.navigateTo({
				    url: '/pages-workflow/flowTopic?Id='+id+'&isView='+true
				})
			},
			close(){
				this.lookForView = false
			},
			choose(){
				let that=this
				uni.navigateTo({
					url: '/pages-device/workflow/addMaintenance?tempId='+that.entity.Id+'&tempTitle='+that.entity.MouldName
				})
			},
			chooseSave(){
				//先去保存接口，再跳转页面
				let that=this
				let opts = {
					url: 'Workflow/UpdateETWorkFlowInfo',
					method: 'POST'
				};
				let data = {
					entity1:that.entity,
					list:that.list
				}
				console.log(JSON.stringify(data))
				uni.showLoading({
					title:'保存中...'
				})
				request.httpTokenRequest(opts,data).then(res=>{
					uni.hideLoading();
					if (res.data.code === 1) {
						//保存成功，跳转
						uni.navigateTo({
							url: '/pages-workflow/addMaintenance?tempId='+that.entity.Id+'&tempTitle='+that.entity.MouldName
						})
					}else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				})
			},
			goEditUser(id,users){
				let that=this
				let qrcodeUserIds=[]
				if(users!=null&&users.length>0){
					for(let i=0;i<users.length;i++){
						qrcodeUserIds.push(users[i].UserId)
					}
				}
				uni.navigateTo({
					url: '/pages-device/workflow/searchUser?qrcodeUserIds='+qrcodeUserIds+'&flowId='+id
				})
			},
			getDetail(id){
				let that=this
				let showNum = 3
				let opts = {
					// url: 'Workflow/GetETWorkFlowMould',
					url: 'WorkflowApi/GetStepSWorkId',
					method: 'get'
				};
				let data = {
					WorkId:id
				}
				uni.showLoading({
					title:'加载中...'
				})
				request.httpTokenRequest(opts,data).then(res=>{
					uni.hideLoading();
					console.log(res.data.Data)
					that.entity = res.data.Data
					let pdfListArray = res.data.Data.listpdf
					if (pdfListArray.length <= showNum) {
						that.showPdfList = pdfListArray
					} else {
						for(let i = 0; i < showNum;i++){
							that.showPdfList.push(pdfListArray[i])
						}
					}
					
					if(res.data.Data.model.StartTime&&res.data.Data.model.EndTime){
						that.startShowTime = res.data.Data.model.StartTime.split(' ')[0]
						that.endShowTime = res.data.Data.model.EndTime.split(' ')[0]
					}
				})
			},
			createSceneByScan(){
				let that = this;
				uni.scanCode({
					onlyFromCamera: false,
					success: function(res) {
						let qrcodeId=request1.getRequest(res.result,'id')
						//跳转添加页面
						uni.navigateTo({
						    url: '/pages-workflow/flowTopic?Id='+qrcodeId
						})
					},fail() {
						uni.hideLoading();
					}
				});
			},
			lookJtem(jtem){
				console.log('jtem',request.baseUrl1+jtem)
				uni.downloadFile({
					url: request.baseUrl1+jtem,
					success(res){
						if (res.statusCode == 200) {
							console.log('下载成功')
							let filePath = encodeURI(res.tempFilePath)
							uni.openDocument({
								filePath: encodeURI(filePath),
								showMenu: true,
								success:function(res){
									console.log('打开文档成功')
								},
								fail(e){
									console.log('打开失败', e)
									uni.showToast({
										title: '文件打开失败',
										icon: 'none'
									})
								}
							})
						} else {
							console.log('下载失败')
							uni.showToast({
								title: '文件下载失败',
								icon: 'none'
							})
						}
					}
				})
			},
			lookAllFiles(){
				let that = this
				uni.navigateTo({
					url: '/pages-weibao/allFilesPages?WorkId='+that.optionWorkId
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	// 新--修改
	.eachBox{
		width: 100%;
		margin-left: 30rpx;
		border-left: 1px solid #999;
	}
	// 一级标题
	.oneTitleBox{
		display: flex;
		margin-left: -20rpx;
        .newdotting{
            width: 40rpx;
            height: 40rpx;
            border: 9rpx solid #409eff;
            border-radius: 50%;
			margin-top: 40rpx;
            margin-right: 20rpx;
            background-color: #fff;
			&.redBgc{
				border-color: #4caf50;
			}
			&.blueBgc{
				border-color: #47ea45;
				box-shadow: 0rpx 0rpx 20rpx #47ea45;
			}
			&.greenBgc{
				border-color: #a7a7a7;
			}
        }
        .xinxiContent {
            background-color: #f1f1f1;
            flex: 0.9;
            padding: 35rpx;
            margin-bottom: 20rpx;
			.topTitle {
				margin-bottom: 30rpx;
				.topContent {
					display: inline-block;
					color: #fff;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;
					border-radius: 10rpx;
					background-color: #1f479e;
					
				}
			}
            .btnContain {
                display: flex;
				justify-content: flex-end;
				padding-top: 20rpx;
				border-top: 1px solid #ececec;

                .btn {
                    padding: 10rpx;
                    margin-right: 25rpx;
                    border-radius: 10rpx;
                    &:last-child {
                        margin-right: 0;
                    }
                }
                .btn2{border: 1rpx solid #5875b4;color: #5875b4;}
                .btn3{border: 1rpx solid #fe952c;color: #fe952c;}
                .btn4{border: 1rpx solid #6ac08d;color: #6ac08d;}


            }
			
			.usersContain {
				display: flex;
				flex-wrap: wrap;
				
				.usersBox {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					
					.usersName {
						margin-left: 20rpx;
					}
				}
			}
        }
	}
	
	
	
	// 新--修改结束
	
	.contentBox {
		background-color: rgba(249,249,249,1);
		
		.contentHeader {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 40rpx;
			padding-bottom: 20rpx;
			background-color: #fff;
			
			.headerLogo {
				width: 180rpx;
				height: 180rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
				
			}
			.contentTitle {
				flex-grow: 1;
				align-self: stretch;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
				>view {
					> text {
						margin-right: 10rpx;
					}
				}
			}
		}
        .contentHead {
            margin: 10rpx 0;
            padding: 20rpx;
            background-color: #fff;
            .baseTitle {
                font-size: 35rpx;
                color: #000;
                margin: 15rpx 0 30rpx;
            }
            .baseCard {
                .flex-between {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 20rpx 0;
					
					.left-title{
						color: #b3b3b3;
						flex: 0.35;
					}
					.right-title{
						flex: 0.65;
						text-align: right;
					}
                }
            }
        }
		.contentBody {
			margin: 20rpx 0;
			padding-bottom: 10rpx;
			background-color: #fff;
			.bodyTitle {
				padding: 25rpx 40rpx;
				font-weight: 700;
				border-bottom: 1rpx solid rgba(242, 242, 242, 1);
			}
			.bodyLine {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 30rpx 40rpx;
				.infoKey {
					color: #999999;
				}
			}
		}
		.filesBox {
			margin: 10rpx 0;
			padding: 20rpx;
			background-color: #fff;
			.titleLine{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.consultFiles{
					font-size: 35rpx;
					color: #000;
				}
				.lookMore{
					color: #5875b4;
				}
			}
			.flies {
				.detailFile{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 15rpx 0;
					>img{
						$w: 77rpx;
						width: $w;
						height: (200/176)*$w;
					}
					.fileName{
						flex: 1;
						margin: 0 15rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						// 单行
						// white-space: nowrap;
						
						// 多行
						display: -webkit-box;
						-webkit-line-clamp: 2; /* 限制行数 */
						-webkit-box-orient: vertical;
					}
					.seeBtn{
						border-radius: 15rpx;
						padding: 15rpx 25rpx;
						color: #fff;
						background: linear-gradient(45deg,rgba(20,178,181,100%),rgba(43,194,161,100%));
					}
				}
			}
		}
		.flowInfo {
			margin-bottom: 20rpx;
			background-color: #fff;
			.bodyTitle {
				padding: 25rpx 40rpx;
				border-bottom: 1rpx solid rgba(242, 242, 242, 1);
			}
			.flowCon {
				padding: 40rpx 40rpx 0;
				.flowBox {
					border-left: 1rpx solid #999;
					height: auto;
					min-height: 240rpx;
					padding-bottom: 40rpx;
					box-sizing: content-box;
					position: relative;
					&:last-child {
						border-left: none
					}
				
					.dot {
						position: absolute;
						top: 0;
						transform: translateX(-50%);
						width: 20rpx;
						height: 20rpx;
						border: 1rpx solid #000;
						border-radius: 50%;
						background-color: #fff;
					}
					
					.hasDot{
						position: absolute;
						top: -3rpx;
						transform: translateX(-50%);
						width: 20rpx;
						height: 20rpx;
						border: 9rpx solid #0a9b24;
						border-radius: 50%;
						background-color: #fff;
						box-sizing: content-box;
					}
					.dotting{
						position: absolute;
						top: -3rpx;
						transform: translateX(-50%);
						width: 20rpx;
						height: 20rpx;
						border: 9rpx solid #409eff;
						border-radius: 50%;
						background-color: #fff;
						box-sizing: content-box;
					}
					
					.flowStatus {
						padding-bottom: 20rpx;
						text-indent: 35rpx;
						.status {
							position: relative;
							top: -9rpx;
							font-weight: 700;
							font-size: 30rpx;
						}
					}
					.flowTime {
						padding-bottom: 20rpx;
						text-indent: 35rpx;
						.time {
							color: #565656;
							font-size: 24rpx;
							font-weight: 700;
						}
					}
					
					.flowUser {
						padding-bottom: 20rpx;
						text-indent: 35rpx;
						height: auto;
						min-height: 50px;
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						align-content: flex-start;
						.time {
							color: #3b3b3b;
							font-size: 24rpx;
							line-height: 50px;
							font-weight: 700;
							text-align: left;
						}
					}
					.lookOver {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-70%);
						.lookBtn {
							width: 150rpx;
							border-radius: 100rpx;
							border: 1rpx solid #84dcb0;
							background-color: #e7f4ee;
							text-align: center;
							height: 50rpx;
							line-height: 50rpx;
							color: #19be6b;

						}
					}
					.toSign {
						position: absolute;
						right: 0;
						top: 0;
						.signBtn {
							width: 150rpx;
							border-radius: 100rpx;
							border: 1rpx solid #7bbcff;
							background-color: #f0f7ff;
							text-align: center;
							height: 50rpx;
							line-height: 50rpx;
							color: #409eff;
						}
						.signBtn_noAuth {
							width: 150rpx;
							border-radius: 100rpx;
							border: 1rpx solid #dcdfe6;
							background-color: #dcdfe6;
							text-align: center;
							height: 50rpx;
							line-height: 50rpx;
							color: #5e5e5e;
						}
					}
				}
			}
		}
	}
	
	
	.publish-goods-wrap {
			background: rgba(255, 255, 255, .5);
			padding: 24rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}

	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
	
		.publish-goods-btn-left {
			width: 44%;
			margin: 12rpx;
			background: #0079FE;
			color: #FFFFFF;
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 82rpx;
			float: left;
		}
		.publish-goods-btn-right {
			width: 44%;
			margin: 12rpx;
			background: #e54d42;
			color: #FFFFFF;
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 82rpx;
			float: right;
		}
	
		.goods-empty-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40%;
		}
		
		
		.lookForBox{
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0,0,0,0.5);
			.lookInfoBox{
				position: absolute;
				top: 50%;
				left: 5%;
				right: 5%;
				transform: translate(0, -50%);
				background-color: #f8f8f8;
				border-radius: 20rpx;
				overflow: hidden;
				.top{
					text-align: center;
					position: relative;
					.title{
						font-size: 34rpx;
						font-weight: 700;
						padding: 20rpx 0;
						background: #fff;
					}
					.close{
						position: absolute;
						top: 0;
						right: 20rpx;
						transform: rotate(45deg);
						font-size: 60rpx;
					}
				}
				.lookInfoBody {
					max-height: 30vh;
					overflow: auto;
					padding: 15rpx 0;
					.eachLookInfo {
						padding: 30rpx 20rpx;
						margin: 25rpx 35rpx;
						background: #fff;
						border-radius: 20rpx;
					}
				}
				
			}
			
		}
		
</style>